
<template>
    <div id="container" class="city">
    </div>
</template>
<script>

import AMap from 'AMap';   //在页面中引入高德地图

export default {
    props:['trsnfer'],
    mounted(){
       this.loadmap();     //加载地图和相关组件
      //  console.log(this);
    },
    methods: {
      loadmap(){
        let this_ = this;
        AMapUI.loadUI(['misc/MobiCityPicker'], function(MobiCityPicker) {

          var cityPicker = new MobiCityPicker({
            //topGroups: ..., // 顶部城市列表
          });

          //监听城市选中事件
          cityPicker.on('citySelected', function(cityInfo) {
            console.log(this_);
            this_.trsnfer(cityInfo)
            //隐藏城市列表
            // bol = true;
            cityPicker.hide();

            //选中的城市信息
            console.log(cityInfo);
          });

          //显示城市列表，可以用某个click事件触发
          cityPicker.show();
        });
      }
    }
}
</script>
<style scoped>
    .mymap{
      width:auto;
      height: 300px;
    }
</style>
